<template>
    <div class="box" style="height:100%">
        <div class="boolbar">
            <span class="proview">
                预览
                <el-icon @click="proviewClick">
                    <View />
                </el-icon>
            </span>
            <!-- <span>JSON数据</span>
            <div>{{ componentsNameList().list }}</div> -->
            <Proview :isShow="isShow" :data="data" @close="close" />
        </div>
        <el-row justify="space-between" :gutter="1" style="background-color: #f1f1f1; height: calc(100% - 21px);">
            <el-col :span="6" style="height: 100%">
                <div class="left">
                    <div class="title">组件库</div>
                    <drag-components @mouseDown="mouseDown" @mouseUp="mouseUp" @dragEnd="dragEnd"></drag-components>
                </div>
            </el-col>
            <el-col :span="10" style="height: 100%">
                <div class="center">
                    <component-vessel @dragEnter="dragEnter" @drop="drop" @dragLeave="dragLeave" @dragOver="dragOver"
                        :componentsName="componentsName"></component-vessel>
                </div>
            </el-col>
            <el-col :span="6" style="height: 100%">
                <div class="right">
                    <div class="title">配置项</div>
                    <components-option v-show="componentsNameList().list.length"
                        :componentsName="optionName"></components-option>
                    <div v-show="!componentsNameList().list.length">
                        选中组件后配置
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
    
<script setup>
import { ref, watch } from 'vue'
import DragComponents from './DragComponents.vue';
import ComponentVessel from './ComponentVessel.vue';
import ComponentsOption from './options/ComponentsOption.vue';
import Proview from './proview/Proview.vue';
import { componentsNameList } from '@/store/pinia';
import {provide} from 'vue'
// 当前拖拽组件类型
const componentsName = ref()
let cName = undefined
const mouseDown = (e, name) => {
    // 将可拖拽属性设为true
    e.target.draggable = true;
    cName = name
    // 开始拖拽
    e.target.parentNode.parentNode.ondragstart = (e) => {

    };
};
const dragEnter = (e) => {
};
const mouseUp = (e) => {
    e.target.draggable = false;
};
const dragOver = e => {
    e.preventDefault();
}
const dragLeave = e => {
}
const drop = e => {
    e.preventDefault()
    componentsName.value = cName
}
const dragEnd = e => {
    componentsName.value = ''
}
const optionName = ref()
/* 点击组件右侧显示配置信息 */
const mClick = (options,value) => {
    console.log(options.id);
    optionName.value = options.name + 'Option'
}
provide('componentClick',mClick) // 给所有子组件注入函数
/* 删除所有组件后,将组件名置空 */
watch(() => componentsNameList().list.length, n => {
    if (n == 0) {
        optionName.value = ''
    }
})
const isShow = ref(false)
const data = ref([])
/* 预览点击事件 */
const proviewClick = e => {
    isShow.value = !isShow.value
    if (isShow.value) {
        data.value = componentsNameList().list
        return
    }
}
const close = () => {
    isShow.value = false
}
</script>
    
<style scoped>
.left,
.center,
.right {
    height: 100%;
    box-sizing: border-box;
    border: 1px solid white;
    overflow: auto;
}

.title {
    width: 100%;
    /* height: 30px; */
    line-height: 30px;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
}

.component {
    width: 50%;
    /* height: 30px; */
    line-height: 30px;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #fff;
    margin: 10px;
    cursor: pointer;
}

.component:hover {
    border-color: #409eff;
    color: #409eff;
}

::v-deep.el-icon {
    vertical-align: middle;
    cursor: pointer;
}

/* .left{
    overflow-y: scroll;
} */
</style>